<template>
  <div class="container cube-scroll-wrapper">
    <cube-scroll ref="scroll"
                 :data="msg"
                 @scroll="onPullingUp"
                 :scrollEvents="['scroll']">
      <div class="card"
           v-for="(item, index) in order_list"
           :key="index">
        <div class="title">
          <div class="left">
            核销单号
          </div>
          <div class="right">
            ：{{item.order_sn}}
          </div>
        </div>
        <div class="detail">
          <div class="left">
            姓名
          </div>
          <div class="right">
            ：{{item.name}}
          </div>
        </div>
        <div class="detail">
          <div class="left">
            手机号
          </div>
          <div class="right">
            ：{{item.username}}
          </div>
        </div>
        <div class="detail">
          <div class="left">
            医院
          </div>
          <div class="right">
            ：{{item.hos_name}}
          </div>
        </div>
        <div class="detail">
          <div class="left">
            项目
          </div>
          <div class="right">
            ：{{item.pro_name}}
          </div>
        </div>
        <div class="detail">
          <div class="left">
            医生
          </div>
          <div class="right">
            ：{{item.doc_name}}
          </div>
        </div>
        <div class="detail">
          <div class="left">
            手术时间
          </div>
          <div class="right">
            ：{{item.op_time}}
          </div>
        </div>
        <div class="detail">
          <div class="left">
            核销时间
          </div>
          <div class="right">
            ：{{item.use_time}}
          </div>
        </div>
      </div>
    </cube-scroll>

    <!-- <ul class="content2">
      <li>核销单号：<span>{{item.order_sn}}</span></li>
      <li class="line2"></li>
      <li>姓&emsp;&emsp;名：<span>{{item.name}}</span></li>
      <li>手&nbsp;&nbsp;机&nbsp; 号：<span>{{item.username}}</span></li>
      <li>医&emsp;&emsp;院：<span>{{item.hos_name}}</span></li>
      <li>项&emsp;&emsp;目：<span>{{item.pro_name}}</span></li>
      <li>医&emsp;&emsp;生：<span>{{item.doc_name}}</span></li>
      <li>手术时间：<span>{{item.op_time}}</span></li>
      <li>核销时间：<span>{{item.use_time}}</span></li>
    </ul> -->
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { Indicator } from 'mint-ui';
import { Style, Scroll } from 'cube-ui'
import  api from '../../assets/js/api'
export default {
  name: "write-offlist",
  data () {
    return {
      page: 1,//当前页
      pageSize: 1000,//每页数量
      msg: [],
      options: {
        pullDownRefresh: {
          threshold: 90,
          stop: 40,
          txt: '刷新成功'
        },                                // 配置下拉刷新 
        pullUpLoad: {
          threshold: 0,
          txt: {
            more: '上拉加载更多',
            noMore: '没有更多数据'
          }
        }
      },
      order_list: [0],
      isbottom: false
    }
  },
  methods: {
    onPullingUp (e) {
    //   let absheight = Math.abs(e.y)
    //   if (this.isbottom) {
    //     return false
    //   }
    //   if (absheight > 200) {
    //     this.page++
    //     this.get_list()
    //   }
    },
    get_list () {
      if (this.isbottom) {
        return false
      }
      let load = this.loading("加载中");
      load.show();
      this.axios.post('/api/butler/ticket/check/list', {
        page: this.page,
        pageSize: this.pageSize
      }).then((result) => {
        let res = result.data
        load.hide();
        if (res.code == 200) {
          let arr = res.data.trans
          if (this.page == 1 && arr.length > 0) {
            this.order_list = arr
          } else if (this.page > 1 && arr.length > 0) {
            let order_list = [...this.order_list]
            order_list.push(...arr)
            this.order_list = [...order_list]
          } else if (this.page > 1 && arr.length == 0) {
            this.isbottom = true
            Toast({
              message: '没有更多数据了',
              position: "bottom",
              duration: 2000
            });
          }
        } else {
          Toast({
            message: res.data.msg,
            position: "bottom",
            duration: 2000
          });
          return false;
        }

      }).catch((err) => {
        load.hide();
        Toast({
          message: "请求失败，请稍后重试",
          position: "bottom",
          duration: 2000
        });
      });
    }
  },
  mounted () {
    this.axios.defaults.baseURL = api
    this.get_list()
  }
}
</script>

<style lang="less" scoped>
.container {
  background: rgba(204, 204, 204, 0.2018);
  padding-bottom: 60px;
  margin-top: 1px;
  box-sizing: border-box;
  .card {
    background-color: #fff;
    padding: 0 15px 10px;
    margin-bottom: 10px;
    .title,
    .detail {
      display: flex;
      .left {
        width: 70px;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(68, 68, 68, 1);
        text-align: justify;
        text-align-last: justify;
      }
      .right {
        flex: 1;
        font-size: 14px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
      }
    }
    .title {
      line-height: 40px;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
    }
    .detail {
      line-height: 20px;
      margin-top: 5px;
      &:first-of-type {
        margin-top: 0;
      }
    }
  }
}
</style>
